import React from "react";
import { Form, Input, Button, Checkbox, Card, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { setToken } from "../utils/auth";
import { loginApi } from "../services/auth";
import "./login.css";

function Login(props) {
    const { getFieldDecorator } = props.form;
    const handleSubmit = (e) => {
        e.preventDefault();
        props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log("Received values of form:", values);
                // 提交表单，请求接口
                setToken(values.username);
                props.history.push("/admin");
                // loginApi({
                //     userName: values.username,
                //     password: values.password,
                // })
                //     .then((res) => {
                //         if (res.code == "success") {
                //             setToken(res.token);
                //             props.history.push("/admin");
                //         } else {
                //             message.info(res.message);
                //         }
                //         console.log(res);
                //     })
                //     .catch((err) => {
                //         console.log(err);
                //     });
            }
        });
    };
    return (
        <Card title="XM Admin SYS" className="login-form">
            <Form name="normal_login" onSubmit={(e) => handleSubmit(e)}>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "Please input your username!",
                        },
                    ]}
                >
                    {getFieldDecorator("username", {
                        rules: [
                            {
                                required: true,
                                message: "请输入username",
                            },
                        ],
                    })(
                        <Input
                            prefix={<UserOutlined className="site-form-item-icon" />}
                            placeholder="username"
                        />
                    )}
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "Please input your password!",
                        },
                    ]}
                >
                    {getFieldDecorator("password", {
                        rules: [
                            {
                                required: true,
                                message: "请输入password",
                            },
                        ],
                    })(
                        <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="password"
                        />
                    )}
                </Form.Item>
                <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                        <Checkbox>记住我</Checkbox>

                        <Button type="primary" htmlType="submit" className="login-form-button">
                            登录
                        </Button>
                    </Form.Item>
                </Form.Item>
            </Form>
        </Card>
    );
}

export default Form.create({ name: "loginForm" })(Login);
